<template>
  <div class="exam-container">
    <div class="exam-header">
      <h2>Cocos Creator 配置文件上传</h2>
      <div class="exam-description">
        请上传您的Cocos Creator JSON配置文件
      </div>
    </div>

    <div class="upload-section">
      <el-upload
          class="upload-area"
          drag
          action=""
          :auto-upload="false"
          :on-change="handleFileChange"
          :show-file-list="false"
          accept=".json"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将Cocos Creator JSON文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传Cocos Creator导出的JSON配置文件
          </div>
        </template>
      </el-upload>

      <div class="preview-section" v-if="fileContent">
        <h3>文件内容预览</h3>

        <div class="file-info">
          <p><strong>文件类型:</strong> Cocos Creator配置文件</p>
          <p><strong>包含数据:</strong></p>
          <ul>
            <li>节点定义: {{ fileContent[3]?.length || 0 }}个</li>
            <li>属性配置: {{ fileContent[4]?.length || 0 }}组</li>
          </ul>
        </div>

        <div class="raw-content">
          <h4>原始数据预览 (前200字符):</h4>
          <pre>{{ truncatedContent }}</pre>
        </div>
      </div>
    </div>

    <div class="exam-footer">
      <el-button
          type="primary"
          @click="submitFile"
          :loading="submitting"
          :disabled="!fileContent"
      >
        提交配置文件
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import axios from "axios";

const submitting = ref(false)
const fileContent = ref(null)
const selectedFile = ref(null) // 新增：存储原始文件对象

// 计算属性：截断显示文件内容（不变）
const truncatedContent = computed(() => {
  if (!fileContent.value) return ''
  const str = JSON.stringify(fileContent.value)
  return str.length > 200 ? str.substring(0, 200) + '...' : str
})

// 处理文件选择（新增：保存原始文件对象）
const handleFileChange = (file) => {
  if (file.raw.type !== 'application/json') {
    ElMessage.error('请上传JSON格式的文件')
    return
  }

  // 保存原始文件对象，用于后续上传
  selectedFile.value = file.raw

  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const content = JSON.parse(e.target.result)
      if (!Array.isArray(content) || content.length < 5) {
        throw new Error('这不是有效的Cocos Creator配置文件')
      }
      fileContent.value = content
      ElMessage.success('配置文件解析成功')
    } catch (error) {
      console.error('解析JSON失败:', error)
      ElMessage.error('解析失败: ' + error.message)
      fileContent.value = null
      selectedFile.value = null // 解析失败时清空文件
    }
  }
  reader.readAsText(file.raw)
}

// 提交文件到后端（核心修改）
const submitFile = async () => {
  if (!selectedFile.value || !fileContent.value) {
    ElMessage.error('请先上传并解析配置文件')
    return
  }

  submitting.value = true

  try {
    // 1. 创建FormData对象，模拟表单上传
    const formData = new FormData()
    // 2. 追加文件：参数名（与后端一致）、文件对象、文件名
    formData.append('cocosConfigFile', selectedFile.value, selectedFile.value.name)
    // （可选）如果需要额外参数，可继续追加
    // formData.append('uploadTime', new Date().toISOString())

    // 3. 发送POST请求，设置Content-Type为multipart/form-data（axios会自动处理）
    const response = await axios.post(
        'http://localhost:8088/api/upload-cocos-config', // 后端接口地址
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data' // 显式指定上传类型
          }
        }
    )

    ElMessage.success('配置文件提交成功！')
    // 重置状态
    fileContent.value = null
    selectedFile.value = null
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败: ' + (error.response?.data?.message || error.message))
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.exam-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.exam-header {
  text-align: center;
  margin-bottom: 30px;
}

.exam-description {
  color: #666;
  margin-top: 10px;
}

.upload-section {
  margin: 30px 0;
}

.upload-area {
  margin: 0 auto;
  max-width: 500px;
}

.el-upload__tip {
  margin-top: 10px;
  color: #666;
  text-align: center;
}

.preview-section {
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.file-info {
  margin: 15px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.raw-content {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f5f5f5;
  max-height: 200px;
  overflow: auto;
}

.raw-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.exam-footer {
  margin-top: 30px;
  text-align: center;
}
</style>